<template>
	<!-- 用户信息模块 -->
	<view class="body">
	<view class="uesrbox">
		<!-- 头像背景 -->
		<view class="bg">
			<image class="bgImg" src="../../static/mytx.png"></image>
			<view class="btn_get">
			<button open-type="getUserInfo" class="serIcon_bg" style="color: #FFFFFF;opacity:1" @getuserinfo='getuserinfo'>
			<!-- 头像 -->
				<view class="head">
					<view class="userIcon1">
							<image class="serIcon" :src="avatarUrl"/>	
					</view>
				<!-- 昵称 -->
					<view class="nickName2">
						{{nickNames}}
					</view>
					<!-- <button class="nickName1" open-type="getUserInfo" @getuserinfo='getuserinfo'>{{nickNames}}</button> -->
				</view>
			</button>
			</view>
		</view>
	</view>
	<view class="module">
		<picker @change="bindPickerChange" :value="index" :range="array">
		    <view class="sex">
			 <view class="content">
				<image class="logo" src="../../static/my/sex.png"></image>
				<view class="font">性别</view>
                <view class="font-1" v-if="show_sex">{{array[index]}}</view>
				<image class="boult" src="../../static/my/boult.png"></image>
			 </view>
		    </view>
		</picker>
		<picker :range="ages" @change="agesChange" :value="ages" mode="multiSelector">
			<view class="age">
				<view class="content">
					<image class="logo" src="../../static/my/age.png"></image>
					<text class="font">年龄</text>
		            <view class="font-2" v-if="show_age">{{ages[0][agesIndex1]}} {{ages[1][agesIndex2]}}</view> 
					<image class="boult" src="../../static/my/boult.png"></image>
				</view>
			</view>
		</picker>
		<picker :range="heights" @change="heightsChange" mode="multiSelector">
			<view class="height">
				<view class="content">
					<image class="logo" src="../../static/my/height.png"></image>
					<text class="font">身高</text>
		          <view class="font-3" v-if="show_height">{{heights[0][heightsIndex1]}} {{heights[1][heightsIndex2]}}</view> 
					<image class="boult" src="../../static/my/boult.png"></image>
				</view>
			</view>
		</picker>
		<navigator url='/pages/my/fun'>
			<view class="fun">
				<view class="content">	
					<image class="logo" src="../../static/my/fun.png"></image>
					<text class="font">你还想要什么功能？</text>
					<image class="boult" src="../../static/my/boult.png"></image>
				</view>
			</view>
		</navigator>
	</view>
	</view>
</template>
 
<script>
	
	import {login,is_login} from '@/pages/login/login.js';
	import store from 'store';
	export default {
		data() {
			return {
				temp:0,
				exitButton:'',
				nickNames: '点击登录',
				avatarUrl: "https://b.bdstatic.com/searchbox/image/cmsuploader/20180821/1534857615114422.png",
				array: ['女','男'],
				index: 0,
				show_sex:false,
				ages:[
				    ['1','2','3','4','5','6','7','8','9','10',
					'11','12','13','14','15','16','17','18','19','20',
					'21','22','23','24','25','26','27','28','29','30',
					'31','32','33','34','35','36','37','38','39','40',
					'41','42','43','44','45','46','47','48','49','50',
					'51','52','53','54','55','56','57','58','59','60',
					'61','62','63','64','65','66','67','68','69','70',
					'71','72','73','74','75','76','77','78','79','80',
					'81','82','83','84','85','86','87','88','89','90',
					'91','92','93','94','95','96','97','98','99','100'],
				    ["岁"]
				],
				agesIndex1:27,
				agesIndex2: 0,
				show_age:false,
				heights:[
						  ['120','121','122','123','124','125','126','127','128','129',
						   '130','131','132','133','134','135','136','137','138','139',
						   '140','141','142','143','144','145','146','147','148','149',
						   '150','151','152','153','154','155','156','157','158','159',
						   '160','161','162','163','164','165','166','167','168','169',
						   '170','171','172','173','174','175','176','177','178','179',
						   '180','181','182','183','184','185','186','187','188','189',
						   '190','191','192','193','194','195','196','197','198','199',
						   '200','201','202','203','204','205','206','207','208','209',
						   '210'],
						   ["cm"]
						   ],
				heightsIndex1:40,
			    heightsIndex2: 0,
				show_height:false,
			    sign:true,//点击登录的标志
			}
		},
		onLoad:function(){
			let that = this;
			uni.login({
				provider: 'baidu',
				success: function(loginRes) {
					console.log(loginRes,'99999999');
					// 获取用户信息
					uni.getUserInfo({
						provider: 'baidu',
						success: function(infoRes) {
							console.log(infoRes);
							if(infoRes.is_anonymous){
								console.log('拒绝');
								uni.showToast({
									title: '未登录',
									icon:'none',
									duration: 2000
								});
							}else{
								denglu(that);
							}
						},
						fail: function(res){
							console.log(res,'拒绝(假)');
						}
					});
				},
				fail:function(loginRes){
					console.log(loginRes,'369');
				}
			});
			
		},
		onShow: function () {
			
		},
		methods:{
		getuserinfo:function(){
				let that = this;
				const token = uni.getStorageSync('token');
				uni.login({
					provider: 'baidu',
					success: function(loginRes) {
						// 获取用户信息
						uni.getUserInfo({
							provider: 'baidu',
							success: function(infoRes) {
								console.log(infoRes,'369');
								if(infoRes.is_anonymous){
									console.log('拒绝');
									uni.showToast({
										title: '未登录',
										icon:'none',
										duration: 2000
									});
								}else{
									if(token=='' && that.sign==true){
										that.sign=false;
										denglu(that);
									}
								}
							},
							fail: function(res){
								console.log(res,'拒绝(假)');
							}
						});
					}
				});	
		},
		
		
		
		
		// 性别
		bindPickerChange: function(e){
			let that=this;
			console.log('picker发送选择改变，性别携带值为', e.target.value);
			that.index= e.detail.value;
			// console.log(this.array[this.index],'111');
			console.log(e.detail.value,'e.detail.value');
			// that.show_sex=true;
			var sex =  e.target.value;
			sex += 1;
			const token = uni.getStorageSync('token');
			//记录用户性别信息
			uni.request({
				url:store.state.URL+"rwd/login_user/user_record",
				data: {
				   token,
				   sex
				},
				method: 'POST',
					success(res) {
						console.log(res);
						is_login(res);
						if(res.data.msg == 'Token不可用'){
						    res.data.msg = '请先登录';
						    that.show_sex=false;
							console.log(that.show_sex,'that.show_sex1')
						}else{
							that.show_sex=true;
							console.log(that.show_sex,'that.show_sex2');
						}
						// uni.showToast({
						// 	title: res.data.msg,
						// 	icon: 'none',
						// 	duration: 1000
						// });
					},
					fail() {
						console.log("失败");
					}
			});
        },
		// 年龄
		agesChange:function(e){
			let that=this;
			console.log(e.detail);
			// console.log('picker发送选择改变，年龄携带值为', e.target.value);
		    that.agesIndex1 = e.detail.value[0];
			// console.log(e.detail.value[0],' e.detail.value[0]');
			// console.log(this.ages[[0].this.agesIndex1],'this.ages[this.agesIndex1]');
			
		    // this.agesIndex2 = e.detail.value[1];
			// var age = e.detail.value[0];
			var age = e.detail.value[0];
			age += 1;
			const token = uni.getStorageSync('token');
			console.log(age,'age');
			uni.request({
			          url:store.state.URL+"rwd/login_user/user_record",
			          data: {
			 		   token,
			 		   age,
			          },
			          method: 'POST',
			         success(res) {
			 			console.log(res);
						is_login(res);
						if(res.data.msg == 'Token不可用'){
							res.data.msg = '请先登录';
							that.show_age=false;
						}else{
							that.show_age=true;
						}
						// uni.showToast({
						// 	title: res.data.msg,
						// 	icon: 'none',
						// 	duration: 1000
						// });
			 		},
			 		fail() {
			 			console.log("失败");
			 		}
			     });
		},
		// 身高
		heightsChange:function(e){
			let that=this;
			console.log('picker发送选择改变，身高携带值为', e.target.value);
			const token = uni.getStorageSync('token');
		     that.heightsIndex1 = e.detail.value[0];
		     // this.heightsIndex2 = e.detail.value[1];
			 var stature = e.detail.value[0];
			// var stature = e.target.value;
			 stature += 1;
			 //stature = this.heights[0][stature];
			 console.log(stature,'stature');
			 uni.request({
			          url:store.state.URL+"rwd/login_user/user_record",
			          data: {
			 		   token,
			 		   stature,
			          },
			          method: 'POST',
			         success(res) {
			 			console.log(res);
						is_login(res);
						if(res.data.msg == 'Token不可用')
						 {
							res.data.msg = '请先登录';
							that.show_height=false;
						 }else{
							that.show_height=true;
						 }
						
						// uni.showToast({
						// 	title: res.data.msg,
						// 	icon: 'none',
						// 	duration: 1000
						// });
			 		},
			 		fail() {
			 			console.log("失败");
			 		}
			     });
		}
		}
	}
	
export function denglu(that){
	login().then(res => {
		//登录成功
		const userInfo = uni.getStorageSync('userInfo');
	    const token = uni.getStorageSync('token');
		console.log(token,'token');
		// console.log(userInfo,'userInfo');
		if(userInfo.nickName == '') userInfo.nickName = "百小度";
		that.nickNames = userInfo.nickName;
		that.avatarUrl = userInfo.avatarUrl;
		//查询用户信息
		uni.request({
		         url:store.state.URL+"rwd/login_user/user_select",
		         data: {
					token
		         },
		         method: 'POST',
		        success(res) {
					console.log(res.data.user_info[0]);
					var data_res = res.data.user_info[0];
					console.log(data_res.stature,'data_res.staturedata_res.stature');
					//显示数据
					if(data_res.sex == null){
						that.show_sex=false;
					}else{
						that.index = data_res.sex-1;
						that.show_sex=true;
					}
					if(data_res.age == null ){
						that.show_age=false;
					}else{
						that.agesIndex1 = data_res.age-1;
						that.show_age=true;
					}
					if(data_res.stature == null ){
						that.show_height=false;
					}else{
						that.heightsIndex1 = data_res.stature-1;
						that.show_height=true;
					}
				},
				fail() {
					console.log("失败");
					that.sign=true;
					
				}
		    });
			uni.showToast({
				title: '登录成功',
				icon:'success',
				duration: 800
			});
		
	  }).catch(err => {
		// 登录失败
		console.log(err);
		that.sign=true;
	  });
}
</script>

<style>
	@font-face {
		font-family:'PingFangSC-Regular';
		src:url('https://www.jianfeirj.com/font/PingFang%20Regular.ttf');
	}
	
	
	.exit_all{
		margin-top: 588upx;
		color: #CCCCDD;
	}
	.exit{
		width: 658upx;
		height: 88upx;
		border: 1px #CCCCDD solid;
		border-radius: 10upx;
		margin-left:44upx;
		color: #CCCCCC;
		background-color: #FFFFFF;
		font-family:PingFangSC-Regular;
		font-weight: bold;
		font-size: 36upx;
		text-align: center;
		line-height: 88upx;
	}
	.exitHidden{
		width: 658upx;
		height: 88upx;
		border: 1px #CCCCDD solid;
		border-radius: 10upx;
		margin-left:44upx;
		color: #000000;
		font-size: 36upx;
		text-align: center;
		line-height: 88upx;
		display: none;
	}
    .userbox{
		height: 100%;
	}
	.bg{
		position: relative;
		height:350upx;
	}
	.bgImg{
	  position: absolute;
	  background-repeat: no-repeat;
	  height:350upx;
	  width:750upx;	
	}
	.head{
		  /* position: fixed; */
		  position: relative;
		  text-align:center;
		 
	}
	.userIcon1{
	}
	.btn_get{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.serIcon_bg{
		display: inline-block;
		font-size: 40upx;
		background-color:rgba(242,242,247,0);
		color: rgba(255,255,255,1);
	}
	.serIcon_bg:after{
		border:none;
	}
	.serIcon{
		border-radius: 50%;
		border: 2upx solid #FFFFFF;
		justify-content:center;
		/* overflow: hidden; */
		margin-top: 62upx;
		width: 150upx;
		height: 150upx;
	}
	.nickName2{
		position: relative;
		text-align: center;
		font-size: 40upx;
		color: #FFFFFF;
		background-color: rgba(255,255,255,0);
		font-family:PingFangSC-Regular;
		margin-top: -24upx;
		}
	.nickName1{
		position: relative;
		text-align: center;
		font-size: 40upx;
		color: #FFFFFF;
		background-color: rgba(255,255,255,0);
		font-family:PingFangSC-Regular;
		}
	.nickName1:after{
		border: none;
	}
	/* .nickName{
		font-size: 40upx;
		background-color:rgba(242,242,247,0);
		color: rgba(255,255,255,1);
	} */
	.module{
		position: absolute;
		height: 406upx;
		width: 750upx;
		}
	.sex,.age,.height,.fun{
		height: 110upx;
		width: 750upx;
		background-color: #FFFFFF;
	}
	.sex{
		margin-top: 24upx;
		border-bottom: 1px solid #E1E1E1;
	}
	.age{
		border-bottom: 1px solid #E1E1E1;
	}
	.height{
		
	}
	.content{
		padding:31upx 30upx;
		align-items: center;
		display: flex;
	}
	.logo{
		margin-top: 31upx 30upx;
		height:48upx;
		width: 48upx;
	}
	.font{
		margin-left:10px;
		text-align: center;
		font-family:PingFangSC-Regular;
		font-weight: bold;
		font-size: 28upx;
		color: #333333;
	}
	.font-1{
		margin-left:480upx;
		color: #999999;
		font-size: 28upx;
	}
	.font-2{
		margin-left:450upx;
		color: #999999;
		font-size: 28upx;
	}
	.font-3{
		margin-left:420upx;
		color: #999999;
		font-size: 28upx;
	}
	.boult{
		height:16px;
		width: 16px;
		margin-top:6upx;
		margin-left: auto;
	}
	.fun{
		margin-top: 30upx;
	}
</style>
